<template>
    <legend>
        <fieldset>失效函数的应用</fieldset>
        <h1 id="countent">
            {{content}}
        </h1>
        <button v-for="(btn,index) in buttons"  :class="{active:index+1===page}" :key="index" @click="pageChange(index+1)">第{{index+1}}页</button>
       
    </legend>
</template>

<script setup>
import {ref,onMounted, reactive, watchEffect} from "vue"
import CancelPromise from "./cancelPromise"
    // 声明3个按钮
    let buttons = reactive(['第1页','第2页','第3页'])

   
    
    let api1 = signal=> new CancelPromise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('第一页数据')
        },1000)
    },signal)

    let api2 = signal=> new CancelPromise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('第二页数据')
        },2000)
    },signal)

    let api3 = signal=> new CancelPromise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('第三页数据')
        },3000)
    },signal)

    // 模拟请求
    let api = {
        api1, //1000
        api2,  //2000
        api3    //3000
    }
    // 声明响应式的变量 

    let content=ref('')

    // 点击分页获取分页数据
    // 声明一个三方的响应式变量来作为按钮的激活条件
    let page = ref(1)

    let pageChange=(pageSize)=>{
        // fetchDate(pageSize)  
        // 给三方作为激活条件的变量作为赋值
        page.value=pageSize  
    }

    // 封装一个获取内容的方法
    let fetchDate = (pageSize=1,signal)=>(
        api['api'+pageSize](signal)
         .then(res=>{
            console.log(res);
            content.value=res
        })
    )

    // 使用watchEffect
    watchEffect(invalidate=>{
        // 声明一个控制器
        let abortController = new AbortController()
        // 获取signal对象
        let signal = abortController.signal
        // 发起请求，并且传入signal对象
        fetchDate(page.value,signal)
        invalidate(()=>{
            // 页面切换之前，取消上一个promise
            abortController.abort()
        })
    })



    // 页面加载的时候，获取第一页的数据

    // onMounted(()=>{
    //    fetchDate(1)
    // })
</script>
<style>
    .active {
        background-color: hotpink;
    }
</style>
